<!DOCTYPE html>

<html xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>

	<style type="text/css">
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.ui-layout,.ui-layout-doc,.ui-layout-unit,.ui-layout-wrap,.ui-layout-bd,.ui-layout-hd
	{
	border: none;
}

.companyHeaderGrid tr,.companyHeaderGrid td {
	border: none;
}
</style>

</h:head>

<h:body>
	<img class="content" src="#{resource['images/top.jpg']}"
		alt="immagine top"></img>

	<!-- Importo il css per la customizzazione della pagina -->
	<h:outputStylesheet name="css/custom.css" />


	<p:layout fullPage="false" style=" max-width: 90%; height: 1000px">

		<p:layoutUnit position="north"
			style="min-height:100px; font-size: 13pt">
			<p:toolbar>
				<p:toolbarGroup align="right">
					<h:form>
						<p:commandButton id="logoutButton" value="Logout"
							icon="ui-icon-play" action="#{logoutBean.logout()}" />
					</h:form>
				</p:toolbarGroup>
			</p:toolbar>
		</p:layoutUnit>


		<!-- START - ZONA SX DELLA PAGINA -->
		<p:layoutUnit position="west" collapsible="true" size="22%" gutter="0">

			<!-- Inserisco dal file left_menu (della cartella corrente) il menu con i comandi -->
			<ui:insert name="left-menu">
				<div style="padding: 0px 0px 0px 0px">
					<ui:include src="left_menu.xhtml" />
				</div>
			</ui:insert>

		</p:layoutUnit>
		<!-- STOP - ZONA SX DELLA PAGINA -->

		<!-- START - Dettagli del pacchetto -->
		<p:layoutUnit position="center"
			style="padding-left: 10px;margin-bottom: 0px" size="100%">

			<p:panelGrid columns="2" id="packet-detail-panel"
				styleClass="companyHeaderGrid" style="min-width: 100%;">

				<f:facet name="header">
					<p:outputLabel style="font-size: 13pt">Dettagli del pacchetto selezionato: </p:outputLabel>
				</f:facet>

				<h:outputText value="Tipo di Servizio : " />
				<p:outputLabel value="#{giftLMBean.el_visualizzato.tipo_servizio}" />

				<h:outputText value="Nome Pacchetto: " />
				<p:outputLabel value="#{giftLMBean.el_visualizzato.nome_pacchetto}" />


				<h:outputText value="Data : " />
				<p:outputLabel value="#{giftLMBean.el_visualizzato.data}" />

				<h:outputText value="Citta: " />
				<p:outputLabel value="#{giftLMBean.el_visualizzato.citta}" />



				<h:outputText value="Prezzo : " />
				<p:outputLabel value="#{giftLMBean.el_visualizzato.prezzo}" />





			</p:panelGrid>
			<p:panelGrid columns="1" id="escursioni-detail-panel"
				styleClass="companyHeaderGrid" style="min-width: 100%;">


				<h:outputText value="Escursioni: " />

				<!-- Per creare l'accordion panel con tutte le escursioni, mettere l'attributo var="nome del DTO escursione"
				nel tag accordion panel come per le tabelle -->

				<p:accordionPanel multiple="true" var="p"
					value="#{pacchettoBean.pacchettoSelezionato.escursionis}">
					<p:tab title="#{p.descrizione}">

						<h:panelGrid border="0" styleClass="companyHeaderGrid" columns="2"
							cellpadding="10">
							<h:outputText value="Name: " />
							<h:outputText value="#{p.descrizione}" style="font-weight: bold" />



							<h:outputText value="Prezzo: " />
							<h:outputText value="#{p.prezzo}" style="font-weight: bold" />
						</h:panelGrid>

					</p:tab>


				</p:accordionPanel>


				<f:facet name="footer">
					<h:form>
						<p:commandButton value="Acquista Pacchetto"
							action="#{pacchettoBean.compra_pacchetto}" />
						<p:commandButton value="Personalizza Pacchetto"
							action="custom_packet.xhtml" />

						<!-- aggiungi nella gift list -->
						<p:commandButton value="Aggiungi a GiftList" action="" />
					</h:form>
				</f:facet>
			</p:panelGrid>

		</p:layoutUnit>
		<!-- STOP - Dettagli del pacchetto -->

	</p:layout>
	<img class="content" src="#{resource['images/bottom.jpg']}"
		alt="immagine top"></img>

</h:body>
</html>